<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 根组件的模板 new Vue 的那个组件 -->
      <xxxx>
        <!-- 将yyyy用在xxxx里面???? 这里是不行的 -->
        <!-- 默认情况,写在组件开始标签与结束标签之间的内容是不ok的 -->
        <!-- <yyyy></yyyy> -->
        <h1>我是一个H1</h1>
      </xxxx>

      <yyyy></yyyy>

      <!-- <zzzz></zzzz> -->

      <person></person>
      <person></person>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      Vue.config.productionTip = false;

      //   1. Vue.component 是注册全局组件 注册好之后,任何当前vue管理的跟组件或者其他组件都可以去使用
      //   2. 注册局部组件使用 components 选项去注册

      const zzzz = {
        template: `
            <div>
                <p>zzzz</p>
            </div>
        `,
      };

      Vue.component("xxxx", {
        data: function () {
          return {
            name: "里斯",
          };
        },
        template: `
            <div>
                <p>xxxx</p>

                <yyyy></yyyy>

                <zzzz></zzzz>
            </div>
        `,

        // 在 xxxx 组件中局部注册组件
        components: {
          // key: value
          //      key - 组件名称
          //      value - 组件的定义
          zzzz: zzzz,
          //   ...
        },
      });

      Vue.component("yyyy", {
        data: function () {
          return {
            name: "里斯",
          };
        },
        template: `
            <div>
                <p>yyyy</p>
            </div>
        `,
      });

      Vue.component("person", {
        data: function () {
          return {
            name: "里斯",
            age: 18,
          };
        },
        template: `
            <div>
              <h2>姓名：{{ name }}</h2>
              <h2>年龄：{{ age }}</h2>
            </div>
        `,
      });

      new Vue({
        el: "#app",

        data: {
          name: "zhangsan",
        },
      });
    </script>
  </body>
</html>
